資料視覺化4

林嶔 (Lin, Chin)

Lesson 11

d3.js與R

– d3.js是一個JavaScript的套件,他可以應用在網頁上,呈現多種動態圖像。

第一節:D3時間序列圖(1)

dat = read.csv("data11_1.csv", header = TRUE)
head(dat)
##       發病日 個案研判日     通報日 性別 年齡層 居住縣市 居住鄉鎮 居住村里
## 1 1998/01/02            1998/01/07   男  40-44   屏東縣   屏東市         
## 2 1998/01/03            1998/01/14   男  30-34   屏東縣   東港鎮         
## 3 1998/01/13            1998/02/18   男  55-59   宜蘭縣   宜蘭市         
## 4 1998/01/15            1998/01/23   男  35-39   高雄市   苓雅區         
## 5 1998/01/20            1998/02/04   男  55-59   宜蘭縣   五結鄉         
## 6 1998/01/22            1998/02/19   男  20-24   桃園市   蘆竹區         
##      最小統計區 最小統計區中心點X 最小統計區中心點Y   一級統計區
## 1 A1320-0136-00          120.5059          22.46425 A1320-04-008
## 2 A1303-0150-00          120.4536          22.46639 A1303-09-007
## 3 A0201-0449-00          121.7514          24.74922 A0201-23-006
## 4 A6408-0153-00          120.3381          22.63032 A6408-10-010
## 5 A0209-0232-00          121.7983          24.68457 A0209-10-005
## 6 A0305-0543-00          121.2965          25.04431 A0305-36-002
##   二級統計區 感染縣市 感染鄉鎮 感染村里 是否境外移入 感染國家 確定病例數
## 1   A1320-04                                      否                   1
## 2   A1303-09                                      是                   1
## 3   A0201-23                                      是                   1
## 4   A6408-10                                      否                   1
## 5   A0209-10                                      否                   1
## 6   A0305-36                                      是                   1

第一節:D3時間序列圖(2)

library(dygraphs)
lungDeaths <- cbind(mdeaths, fdeaths)
dygraph(lungDeaths)
lungDeaths
##          mdeaths fdeaths
## Jan 1974    2134     901
## Feb 1974    1863     689
## Mar 1974    1877     827
## Apr 1974    1877     677
## May 1974    1492     522
## Jun 1974    1249     406
## Jul 1974    1280     441
## Aug 1974    1131     393
## Sep 1974    1209     387
## Oct 1974    1492     582
## Nov 1974    1621     578
## Dec 1974    1846     666
## Jan 1975    2103     830
## Feb 1975    2137     752
## Mar 1975    2153     785
## Apr 1975    1833     664
## May 1975    1403     467
## Jun 1975    1288     438
## Jul 1975    1186     421
## Aug 1975    1133     412
## Sep 1975    1053     343
## Oct 1975    1347     440
## Nov 1975    1545     531
## Dec 1975    2066     771
## Jan 1976    2020     767
## Feb 1976    2750    1141
## Mar 1976    2283     896
## Apr 1976    1479     532
## May 1976    1189     447
## Jun 1976    1160     420
## Jul 1976    1113     376
## Aug 1976     970     330
## Sep 1976     999     357
## Oct 1976    1208     445
## Nov 1976    1467     546
## Dec 1976    2059     764
## Jan 1977    2240     862
## Feb 1977    1634     660
## Mar 1977    1722     663
## Apr 1977    1801     643
## May 1977    1246     502
## Jun 1977    1162     392
## Jul 1977    1087     411
## Aug 1977    1013     348
## Sep 1977     959     387
## Oct 1977    1179     385
## Nov 1977    1229     411
## Dec 1977    1655     638
## Jan 1978    2019     796
## Feb 1978    2284     853
## Mar 1978    1942     737
## Apr 1978    1423     546
## May 1978    1340     530
## Jun 1978    1187     446
## Jul 1978    1098     431
## Aug 1978    1004     362
## Sep 1978     970     387
## Oct 1978    1140     430
## Nov 1978    1110     425
## Dec 1978    1812     679
## Jan 1979    2263     821
## Feb 1979    1820     785
## Mar 1979    1846     727
## Apr 1979    1531     612
## May 1979    1215     478
## Jun 1979    1075     429
## Jul 1979    1056     405
## Aug 1979     975     379
## Sep 1979     940     393
## Oct 1979    1081     411
## Nov 1979    1294     487
## Dec 1979    1341     574

第一節:D3時間序列圖(3)

dat[,1] = as.Date(dat[,1])
dat.2015 = dat[dat[,1] >= as.Date("2015-01-01") & dat[,1] <= as.Date("2015-12-31"),]

date.range = as.Date("2015-01-01") + 0:364
dengue.2015 = matrix(0, nrow = length(date.range), ncol = 1)
rownames(dengue.2015) = as.character(date.range)
colnames(dengue.2015) = "2015 dengue cases"
for (i in 1:length(date.range)) {
  dengue.2015[i,1] = sum(dat.2015[,1] == date.range[i])
}

head(dengue.2015)
##            2015 dengue cases
## 2015-01-01                 3
## 2015-01-02                 9
## 2015-01-03                 6
## 2015-01-04                 3
## 2015-01-05                 5
## 2015-01-06                 1
dygraph(dengue.2015)

第一節:D3時間序列圖(4)

Time.plot = dygraph(dengue.2015)
Time.plot #基本款
Time.plot = dyOptions(Time.plot, stackedGraph = TRUE)
Time.plot #著色讓趨勢更明顯
Time.plot = dyRangeSelector(Time.plot, height = 50)
Time.plot #增加下方的控制區
library(htmlwidgets)
saveWidget(Time.plot, "dengue2015.html")

練習1:學習將資料整理成函數可接受的格式

練習1答案

dat.2015 = dat[dat[,1] >= as.Date("2015-01-01") & dat[,1] <= as.Date("2015-12-31"),]

date.range = as.Date("2015-01-01") + 0:364
area = c("台南市", "高雄市", "其他")
dengue.2015 = matrix(0, nrow = length(date.range), ncol = 3)
rownames(dengue.2015) = as.character(date.range)
colnames(dengue.2015) = c("Tainan", "Kaohsiung", "Other")

dat.2015[,14] = as.character(dat.2015[,14])
dat.2015[!dat.2015[,14]%in%area[1:2],14] = area[3]
for (k in 1:3) {
  for (i in 1:length(date.range)) {
    dengue.2015[i,k] = sum(dat.2015[,1] == date.range[i] & dat.2015[,14] == area[k])
  }
}

Time.plot = dygraph(dengue.2015)
Time.plot = dyRangeSelector(Time.plot, height = 50)
Time.plot #增加下方的控制區

第二節:D3熱圖(1)

nba = read.csv("data11_2.csv", header = TRUE, row.names = 1)
head(nba)
##                 G  MIN  PTS  FGM  FGA   FGP FTM FTA   FTP X3PM X3PA  X3PP
## Dwyane Wade    79 38.6 30.2 10.8 22.0 0.491 7.5 9.8 0.765  1.1  3.5 0.317
## LeBron James   81 37.7 28.4  9.7 19.9 0.489 7.3 9.4 0.780  1.6  4.7 0.344
## Kobe Bryant    82 36.2 26.8  9.8 20.9 0.467 5.9 6.9 0.856  1.4  4.1 0.351
## Dirk Nowitzki  81 37.7 25.9  9.6 20.0 0.479 6.0 6.7 0.890  0.8  2.1 0.359
## Danny Granger  67 36.2 25.8  8.5 19.1 0.447 6.0 6.9 0.878  2.7  6.7 0.404
## Kevin Durant   74 39.0 25.3  8.9 18.8 0.476 6.1 7.1 0.863  1.3  3.1 0.422
##                ORB DRB TRB AST STL BLK  TO  PF
## Dwyane Wade    1.1 3.9 5.0 7.5 2.2 1.3 3.4 2.3
## LeBron James   1.3 6.3 7.6 7.2 1.7 1.1 3.0 1.7
## Kobe Bryant    1.1 4.1 5.2 4.9 1.5 0.5 2.6 2.3
## Dirk Nowitzki  1.1 7.3 8.4 2.4 0.8 0.8 1.9 2.2
## Danny Granger  0.7 4.4 5.1 2.7 1.0 1.4 2.5 3.1
## Kevin Durant   1.0 5.5 6.5 2.8 1.3 0.7 3.0 1.8
  1. 哪些NBA球員是屬於同個屬性的(如助攻型/全能型/得分型)

  2. 那些數據是屬於同個類別的(如型助攻型/全能型/得分)

第二節:D3熱圖(2)

nba_normalized = scale(nba)
head(nba_normalized)
##                         G         MIN      PTS       FGM      FGA
## Dwyane Wade     0.6179300  1.00197024 3.179941 2.9200222 2.596832
## LeBron James    0.7693834  0.61192992 2.566974 1.9571851 1.697237
## Kobe Bryant     0.8451101 -0.03813728 2.022113 2.0447158 2.125615
## Dirk Nowitzki   0.7693834  0.61192992 1.715629 1.8696545 1.740075
## Danny Granger  -0.2907906 -0.03813728 1.681575 0.9068174 1.354534
## Kevin Durant    0.2392964  1.17532149 1.511307 1.2569400 1.226020
##                       FGP       FTM       FTA        FTP       X3PM
## Dwyane Wade     0.5136017 1.9174753 2.1107721 -0.7401673 -0.1080044
## LeBron James    0.4649190 1.7787289 1.8965892 -0.5233214  0.4920201
## Kobe Bryant    -0.0705898 0.8075041 0.5579463  0.5753645  0.2520103
## Dirk Nowitzki   0.2215059 0.8768773 0.4508549  1.0668818 -0.4680191
## Danny Granger  -0.5574160 0.8768773 0.5579463  0.8934051  1.8120740
## Kevin Durant    0.1484820 0.9462505 0.6650378  0.6765592  0.1320054
##                       X3PA        X3PP         ORB         DRB        TRB
## Dwyane Wade     0.13036473 -0.15749098 -0.27213551 -0.34656760 -0.3287465
## LeBron James    0.69716790  0.02738974 -0.06117775  1.00809403  0.6605370
## Kobe Bryant     0.41376631  0.07532177 -0.27213551 -0.23367913 -0.2526478
## Dirk Nowitzki  -0.53090563  0.13010124 -0.27213551  1.57253638  0.9649320
## Danny Granger   1.64183984  0.43823576 -0.69405103 -0.06434643 -0.2906972
## Kevin Durant   -0.05856966  0.56148957 -0.37761439  0.55654016  0.2419940
##                       AST        STL        BLK         TO         PF
## Dwyane Wade     1.6522467  2.5582382  1.2064646  1.7904454 -0.2984568
## LeBron James    1.5161473  1.3672521  0.8627425  1.0596514 -1.3903719
## Kobe Bryant     0.4727186  0.8908576 -0.1684238  0.3288573 -0.2984568
## Dirk Nowitzki  -0.6614431 -0.7765229  0.3471593 -0.9500323 -0.4804426
## Danny Granger  -0.5253437 -0.3001285  1.3783256  0.1461588  1.1574300
## Kevin Durant   -0.4799772  0.4144632  0.1752983  1.0596514 -1.2083860
library(d3heatmap)
Heat.map = d3heatmap(nba_normalized, dendrogram = "both")
Heat.map

– 這需要用到套件『scales』!

library(scales)
breaks = seq(-2, 2, by = 0.05)
palette = colorRampPalette(c("navy","white","firebrick3"))(82)
colorFunc = col_bin(palette, bins = rescale(breaks))
Heat.map = d3heatmap(nba_normalized, colors = colorFunc, dendrogram = "both")
Heat.map

第二節:D3熱圖(3)

Heat.map = d3heatmap(nba_normalized, colors = colorFunc, dendrogram = "both", k_row = 3, k_col = 3)
Heat.map
  1. 內線肉柱(Yao Ming - Shaquille O’neal):共通點是高籃板/阻攻/犯規等

  2. 全能型球員(Dwayne Wade - Kevin Maritin):共通點是高命中率/助攻/得分/上場時間等

  3. 其他明星球員(Corey Maggette - Ray Allen):這些球員大多有一兩項突出的能力,但大多數能力低於明星球員平均值

library(htmlwidgets)
saveWidget(Heat.map, "nba2008.html")

練習2:相關係數heatmap

– 資料『mtcars』是從美國1974 Motor Trend上擷取的資料,分別描述32台車的11種性能

data(mtcars)
mtcars
##                      mpg cyl  disp  hp drat    wt  qsec vs am gear carb
## Mazda RX4           21.0   6 160.0 110 3.90 2.620 16.46  0  1    4    4
## Mazda RX4 Wag       21.0   6 160.0 110 3.90 2.875 17.02  0  1    4    4
## Datsun 710          22.8   4 108.0  93 3.85 2.320 18.61  1  1    4    1
## Hornet 4 Drive      21.4   6 258.0 110 3.08 3.215 19.44  1  0    3    1
## Hornet Sportabout   18.7   8 360.0 175 3.15 3.440 17.02  0  0    3    2
## Valiant             18.1   6 225.0 105 2.76 3.460 20.22  1  0    3    1
## Duster 360          14.3   8 360.0 245 3.21 3.570 15.84  0  0    3    4
## Merc 240D           24.4   4 146.7  62 3.69 3.190 20.00  1  0    4    2
## Merc 230            22.8   4 140.8  95 3.92 3.150 22.90  1  0    4    2
## Merc 280            19.2   6 167.6 123 3.92 3.440 18.30  1  0    4    4
## Merc 280C           17.8   6 167.6 123 3.92 3.440 18.90  1  0    4    4
## Merc 450SE          16.4   8 275.8 180 3.07 4.070 17.40  0  0    3    3
## Merc 450SL          17.3   8 275.8 180 3.07 3.730 17.60  0  0    3    3
## Merc 450SLC         15.2   8 275.8 180 3.07 3.780 18.00  0  0    3    3
## Cadillac Fleetwood  10.4   8 472.0 205 2.93 5.250 17.98  0  0    3    4
## Lincoln Continental 10.4   8 460.0 215 3.00 5.424 17.82  0  0    3    4
## Chrysler Imperial   14.7   8 440.0 230 3.23 5.345 17.42  0  0    3    4
## Fiat 128            32.4   4  78.7  66 4.08 2.200 19.47  1  1    4    1
## Honda Civic         30.4   4  75.7  52 4.93 1.615 18.52  1  1    4    2
## Toyota Corolla      33.9   4  71.1  65 4.22 1.835 19.90  1  1    4    1
## Toyota Corona       21.5   4 120.1  97 3.70 2.465 20.01  1  0    3    1
## Dodge Challenger    15.5   8 318.0 150 2.76 3.520 16.87  0  0    3    2
## AMC Javelin         15.2   8 304.0 150 3.15 3.435 17.30  0  0    3    2
## Camaro Z28          13.3   8 350.0 245 3.73 3.840 15.41  0  0    3    4
## Pontiac Firebird    19.2   8 400.0 175 3.08 3.845 17.05  0  0    3    2
## Fiat X1-9           27.3   4  79.0  66 4.08 1.935 18.90  1  1    4    1
## Porsche 914-2       26.0   4 120.3  91 4.43 2.140 16.70  0  1    5    2
## Lotus Europa        30.4   4  95.1 113 3.77 1.513 16.90  1  1    5    2
## Ford Pantera L      15.8   8 351.0 264 4.22 3.170 14.50  0  1    5    4
## Ferrari Dino        19.7   6 145.0 175 3.62 2.770 15.50  0  1    5    6
## Maserati Bora       15.0   8 301.0 335 3.54 3.570 14.60  0  1    5    8
## Volvo 142E          21.4   4 121.0 109 4.11 2.780 18.60  1  1    4    2

練習2答案

library(scales)
breaks = seq(-0.8, 0.8, by = 0.05)
palette = colorRampPalette(c("navy","white","firebrick3"))(length(breaks))
colorFunc = col_bin(palette, bins = rescale(breaks))
Heat.map = d3heatmap(cor(mtcars), colors = colorFunc, dendrogram = "both", k_row = 3, k_col = 3)
Heat.map

第二節:D3動力排版圖(1)

– 我們先看看套件說明內的範例

library(networkD3) 
data(MisLinks)
data(MisNodes)
forceNetwork(Links = MisLinks, Nodes = MisNodes, Source = "source",
             Target = "target", Value = "value", NodeID = "name",
             Group = "group", opacity = 0.4, zoom = TRUE)
head(MisNodes)
##              name group size
## 1          Myriel     1   15
## 2        Napoleon     1   20
## 3 Mlle.Baptistine     1   23
## 4    Mme.Magloire     1   30
## 5    CountessdeLo     1   11
## 6        Geborand     1    9
head(MisLinks)
##   source target value
## 1      1      0     1
## 2      2      0     8
## 3      3      0    10
## 4      3      2     6
## 5      4      0     1
## 6      5      0     1
  1. MisNodes檔案中應該是按照順序(由0開始)描述圈圈的名字[0 - Myriel; 1 - Napoleon; 2 - Mlle.Baptistine; 3 - Mme.Magloire; …]

  2. MisNodes檔案中的group描述不同組別,在圖中應該是顏色上的差別

  3. MisNodes檔案中的size描述圈圈的大小

  4. MisLinks描述圈圈間的聯結,source必定大於target

  5. value代表線的粗細

第三節:D3動力排版圖(2)

MyNodes = data.frame(name = c("Google", "Apple", "Amazon", "Youtube", "Paypal"),
                     group = c("A", "B", "C", "A", "C"),
                     size = c(100, 25, 9, 1, 4))
MyLinks = data.frame(source = c(1, 2, 2, 3),
                     target = c(0, 0, 1, 0),
                     value = c(1, 2, 5, 10))
forceNetwork(Links = MyLinks, Nodes = MyNodes, Source = "source",
             Target = "target", Value = "value", NodeID = "name",
             Group = "group", opacity = 1, zoom = TRUE)

第三節:D3動力排版圖(3)

– 舉例來說,第一條規則告訴我買了Instant food products與soda的人相較於其他人,將有18.996倍的機率再購買hamburger meat!

– 然而,關聯規則實在是太多筆了,我們如果想要一次讀完所有關聯性,使用D3動力排版圖是一個好選擇

F11_1

dat = read.csv("Rules.csv")
dat
##             rule.Input_1       rule.Input_2       rule.Input_3
## 1  Instant food products               soda                   
## 2                popcorn               soda                   
## 3          baking powder              flour                   
## 4                    ham   processed cheese                   
## 5  Instant food products         whole milk                   
## 6                   curd   other vegetables whipped/sour cream
## 7          domestic eggs   processed cheese                   
## 8       other vegetables     tropical fruit        white bread
## 9         hamburger meat whipped/sour cream             yogurt
## 10         domestic eggs   other vegetables     tropical fruit
##    rule.Input_4 rule.Input_5    rule.Output     support confidence
## 1                            hamburger meat 0.001220132  0.6315789
## 2                               salty snack 0.001220132  0.6315789
## 3                                     sugar 0.001016777  0.5555556
## 4                               white bread 0.001931876  0.6333333
## 5                            hamburger meat 0.001525165  0.5000000
## 6        yogurt               cream cheese  0.001016777  0.5882353
## 7                               white bread 0.001118454  0.5238095
## 8        yogurt                      butter 0.001016777  0.6666667
## 9                                    butter 0.001016777  0.6250000
## 10   whole milk       yogurt         butter 0.001016777  0.6250000
##        lift
## 1  18.99565
## 2  16.69779
## 3  16.40807
## 4  15.04549
## 5  15.03823
## 6  14.83409
## 7  12.44364
## 8  12.03058
## 9  11.27867
## 10 11.27867

第三節:D3動力排版圖(4)

all.items = c(as.character(dat[,1]), as.character(dat[,2]), as.character(dat[,3]), as.character(dat[,4]), as.character(dat[,5]), as.character(dat[,6]))
levels.all = levels(as.factor(all.items))
levels.all = levels.all[-1]
MyNodes = data.frame(matrix(NA, ncol = 3, nrow = length(levels.all)))
colnames(MyNodes) = c("name", "group", "size")
MyNodes[,1] = levels.all
out.items = as.character(dat[,6])
levels.out = levels(dat[,6])
MyNodes[levels.all%in%levels.out,2] = "Output"
MyNodes[!levels.all%in%levels.out,2] = "Input"
MyNodes[,3] = 100
MyNodes
##                     name  group size
## 1          baking powder  Input  100
## 2                 butter Output  100
## 3          cream cheese  Output  100
## 4                   curd  Input  100
## 5          domestic eggs  Input  100
## 6                  flour  Input  100
## 7                    ham  Input  100
## 8         hamburger meat Output  100
## 9  Instant food products  Input  100
## 10      other vegetables  Input  100
## 11               popcorn  Input  100
## 12      processed cheese  Input  100
## 13           salty snack Output  100
## 14                  soda  Input  100
## 15                 sugar Output  100
## 16        tropical fruit  Input  100
## 17    whipped/sour cream  Input  100
## 18           white bread Output  100
## 19            whole milk  Input  100
## 20                yogurt  Input  100
# 先將商品數字化
for (i in 1:6) {
  dat[,i] = as.integer(factor(dat[,i], levels = levels.all)) - 1
}
# 逐條規則製造表格
Links = NULL
for (i in 1:nrow(dat)) {
  n.rule = sum(!is.na(dat[i,1:5]))
  new.rule = matrix(NA, ncol = 3, nrow = n.rule)
  for (k in 1:n.rule) {
    item1 = dat[i,k]
    item2 = dat[i,6]
    new.rule[k,1] = max(item1, item2)
    new.rule[k,2] = min(item1, item2)
    new.rule[k,3] = dat[i,9]
  }
  Links = rbind(Links, new.rule)
}

#將重複的相加在一起
dup.MyLinks = Links[duplicated(Links[,1:2]),]
nondup.MyLinks = Links[!duplicated(Links[,1:2]),]
for (i in 1:nrow(dup.MyLinks)) {
  dup.pos = which(nondup.MyLinks[,1]==dup.MyLinks[i,1] & nondup.MyLinks[,2]==dup.MyLinks[i,2])
  nondup.MyLinks[dup.pos,3] = nondup.MyLinks[dup.pos,3] + dup.MyLinks[i,3]
}

#重新格式化
colnames(nondup.MyLinks) = c("source", "target", "value")
MyLinks = data.frame(nondup.MyLinks)
MyLinks
##    source target    value
## 1       8      7 34.03388
## 2      13      7 18.99565
## 3      12     10 16.69779
## 4      13     12 16.69779
## 5      14      0 16.40807
## 6      14      5 16.40807
## 7      17      6 15.04549
## 8      17     11 27.48913
## 9      18      7 15.03823
## 10      3      2 14.83409
## 11      9      2 14.83409
## 12     16      2 14.83409
## 13     19      2 14.83409
## 14     17      4 12.44364
## 15      9      1 23.30925
## 16     15      1 23.30925
## 17     17      1 12.03058
## 18     19      1 34.58792
## 19      7      1 11.27867
## 20     16      1 11.27867
## 21      4      1 11.27867
## 22     18      1 11.27867
forceNetwork(Links = MyLinks, Nodes = MyNodes, Source = "source",
             Target = "target", Value = "value", NodeID = "name",
             Group = "group", opacity = 1, zoom = TRUE)

第三節:D3動力排版圖(5)

forceNetwork(Links = MyLinks, Nodes = MyNodes, Source = "source",
             Target = "target", Value = "value", NodeID = "name",
             Group = "group", opacity = 1, zoom = TRUE,
             colourScale = JS("d3.scale.category10()"))
forceNetwork(Links = MyLinks, Nodes = MyNodes, Source = "source",
             Target = "target", Value = "value", NodeID = "name",
             Group = "group", opacity = 1, zoom = TRUE,
             colourScale = JS("d3.scale.category10()"),
             legend = TRUE, fontSize = 20,  bounded = FALSE,
             charge = -120, opacityNoHover = 0.6, linkDistance = 150)
MyClickScript = 
'if (d.fixed==false) {
d.fixed = true;
d3.select(this).classed("fixed", true);
}
else
{
d.fixed = false;
d3.select(this).classed("fixed", false);
}'
forceNetwork(Links = MyLinks, Nodes = MyNodes, Source = "source",
             Target = "target", Value = "value", NodeID = "name",
             Group = "group", opacity = 1, zoom = TRUE,
             colourScale = JS("d3.scale.category10()"),
             legend = TRUE, fontSize = 20,  bounded = FALSE,
             charge = -120, opacityNoHover = 0.6, linkDistance = 150,
             clickAction = MyClickScript)

練習3:d3 Network練習

nba = read.csv("data11_2.csv", header = TRUE, row.names = 1)
cormatrix.nba = cor(nba)
breaks = seq(-0.8, 0.8, by = 0.05)
palette = colorRampPalette(c("navy","white","firebrick3"))(length(breaks))
colorFunc = col_bin(palette, bins = rescale(breaks))
Heat.map = d3heatmap(cormatrix.nba, colors = colorFunc, dendrogram = "both", k_row = 3, k_col = 3)
Heat.map

練習3答案

cormatrix.nba[cormatrix.nba<0.4] = 0
levels.items = colnames(cormatrix.nba)
MyNodes = data.frame(matrix(NA, ncol = 3, nrow = length(levels.items)))
colnames(MyNodes) = c("name", "group", "size")
MyNodes[,1] = levels.items
MyNodes[,2] = c(1, 2, 2, 2, 2, 1, 2, 2, 3, 3, 3, 3, 1, 1, 1, 2, 2, 1, 2, 1)
MyNodes[,3] = 100
#MyNodes

MyLinks = NULL
for (i in 1:nrow(cormatrix.nba)) {
  for (j in 1:ncol(cormatrix.nba)) {
    if (j > i) {
      if (cormatrix.nba[j,i]!=0) {
        new.rule = data.frame(source = j - 1,
                              target = i - 1, 
                              value = cormatrix.nba[j,i] * 10)
        MyLinks = rbind(MyLinks, new.rule)
      }
    }
  }
}
#MyLinks

MyClickScript = 
'if (d.fixed==false) {
d.fixed = true;
d3.select(this).classed("fixed", true);
}
else
{
d.fixed = false;
d3.select(this).classed("fixed", false);
}'
forceNetwork(Links = MyLinks, Nodes = MyNodes, Source = "source",
             Target = "target", Value = "value", NodeID = "name",
             Group = "group", opacity = 1, zoom = TRUE,
             colourScale = JS("d3.scale.category10()"),
             fontSize = 20,  bounded = FALSE,
             charge = -120, opacityNoHover = 0.8, linkDistance = 80,
             clickAction = MyClickScript)

自由學習:換一個呈現方式

– 你可以學學怎樣畫D3 Hierarchical Edge Bundling plot,他是利用套件『edgebundleR』來繪製,但其中會利用到套件『igraph』來整理資料。

– 畫出這種圖所需要的整理非常類似於D3動力排版圖,你可以參考下面程式碼畫出來看看,看看哪種方式呈現比較好!

library(edgebundleR)
library(igraph)

nba = read.csv("data11_2.csv", header = TRUE, row.names = 1)
cormatrix.nba = cor(nba)
cormatrix.nba[cormatrix.nba < 0.25] = 0

MyNodes = data.frame(ID = colnames(cormatrix.nba),
                     Group = c(1, 2, 2, 2, 2, 1, 2, 2, 3, 3, 3, 3, 1, 1, 1, 2, 2, 1, 2, 1))

MyNodes$key = MyNodes$ID
MyNodes$ID = paste0(MyNodes$Group,".",MyNodes$ID)

MyLinks = NULL
for (i in 1:nrow(cormatrix.nba)) {
  for (j in 1:ncol(cormatrix.nba)) {
    if (j > i) {
      if (cormatrix.nba[j,i]!=0) {
        new.rule = data.frame(source = MyNodes$ID[j],
                              target = MyNodes$ID[i])
        MyLinks = rbind(MyLinks, new.rule)
      }
    }
  }
}

g = graph.data.frame(MyLinks, directed = FALSE, vertices = MyNodes)
clr = as.factor(V(g)$Group)
levels(clr) = c("blue", "red", "black")
V(g)$color = as.character(clr)
V(g)$size = degree(g)*5

edgebundle(g, tension = 0.9)

資料視覺化課程總結

– 在這四堂課程中,你學到了:

  1. 簡單的圖表(圓餅圖、直方圖、散布圖等)

  2. 為你的圖表加料(lines()、points()、polygon()等)

  3. 控制顏色的透明度以及層次

  4. 繪製3D圖片並製作gif檔

  5. 結合地理資訊系統視覺化空間資料

  6. 呼叫Google圖表做簡單的互動式圖表

  7. 與d3.js結合做特定的動態圖表